import {messages} from "share/common";
import React, { Component } from 'react';
import Read from '../svg-component/read';
import 'styles/expense/expense-adjunct-header.scss';

class AdjunctHeader extends Component {

  constructor(props) {
    super(props);
  }

  handleUtil = () => {
    this.props.onChange({ isCheckRead: true });
  };

  handleLabels = (type) => {
    const { labelFilter = [] } = this.props;
    const index = labelFilter.findIndex(label => label === type);
    !~index ? labelFilter.push(type) : labelFilter.splice(index, 1);
    this.props.onChange({ labelFilter });
  };

  renderLabels() {
    const { receiptLabels = [], labelFilter = [] } = this.props;
    return (
      <div className="adjunct-header-labels">
        {
          receiptLabels.map(item => (
            <span
              className={`adjunct-header-label ${labelFilter.includes(item.type) && 'adjunct-header-label-selected'}`}
              onClick={() => this.handleLabels(item.type)}>
              {item.name}
            </span>)
          )
        }
      </div>
    );
  }

  render() {
    const { leftWidth, mergeAdjuncts } = this.props;
    return (
      <section className="adjunct-header" style={{ left: leftWidth }}>
        <div className="adjunct-header-header">
          <div className="adjunct-header-kinds">
            {
              mergeAdjuncts
                .map(item => {
                  return (
                    <div
                      key={item.type}
                      className="adjunct-header-kinds-text adjunct-header-kinds-child"
                    >
                      {item.name}:{item.body.length}
                    </div>
                  );
                })
            }
          </div>
          <div className="adjunct-header-icon" onClick={() => this.handleUtil()}>
            {messages('expense-1.key686')/*切换读图*/} <Read/>
          </div>
        </div>
        {
          this.renderLabels()
        }
      </section>
    );
  }
}

AdjunctHeader.propTypes = {
  changeMode: React.PropTypes.func,
  changeCurrentFlag: React.PropTypes.func
};

export default AdjunctHeader;
